<template>
	<view class="box">
		<video :ref="`playVideoRef`" class="video" id="myVideo" :autoplay="false" :src="item.src"
			title="info.name+' '+(item.title || '')" preload="meta" :muted="muted" :show-loading="true"
			:enable-progress-gesture="controls" :controls="controls" :show-center-play-btn="false" :play-strategy="2"
			:key="key" @waiting="onWaiting" @play="onPlay" @pause="onPause" @ended="onEnded" @error="onError"
			@timeupdate="onTimeupdate" @fullscreenchange="onFullscreenchange" @tap.stop="change">
		</video>
		<!-- 暂停时播放按钮 -->
		<view class="play-btn" v-if="showPlayBtn" @click="play">
			<image :src="ossUrl +  '/static/image/video/play.png'" style="height: 28rpx;width: 28rpx;"></image>
		</view>
		<!-- loading -->
		<image class="loading" :src="ossUrl +  '/static/image/video/loading.gif'" v-if="loading"></image>
		<!-- 标题及小标题 -->
		<view class="info" @click.stop="$emit('showMulu')">
			<text class="text title">{{muted}}@{{info.name}}</text>
			<text class="text"
				style="margin-top: 25rpx;font-size: 26rpx;line-height: 40rpx;">{{item.des || '讲述温暖出行故事，描绘人间烟火，大锁与陈珂从原来的两条“平行线”，变成了感情不断升温的情侣...'}}</text>
		</view>
		<!-- 右侧按钮 -->
		<view class="btns" @click.stop>
			<image class="toux" style="margin-bottom: 40rpx;" :src="ossUrl +  '/static/image/video/tx.png'"></image>
			<image class="btn" :src="isZan? ossUrl + '/static/image/video/dianzan_h.png': ossurl + '/static/image/video/dianzan.png'"
				@click="isZan = !isZan">
			</image>
			<text class="text">0</text>
			<!-- <image class="btn" :src="ossUrl +  '/static/image/video/pinglun.png'" @click.stop="$emit('showPinglun')"></image> -->
			<!-- <text class="text">0</text> -->
			<image class="btn" :src="isSc?osUrl + '/static/image/video/shoucang_h.png': ossUrl + '/static/image/video/shoucang.png'"
				@click="isSc = !isSc">
			</image>
			<text class="text">0</text>
			<image class="btn" :src="ossUrl +  '/static/image/video/fenxiang.png?v=6'"></image>
		</view>

		<!-- 时间信息及静音按钮 -->
		<view class="duration">
			<!-- 进度条 -->
			<view class="progress" @touchstart="onProgressTouchStart" @touchmove="onProgressTouchMove"
				@touchend="onProgressTouchEnd">
				<view class="line" :style="{width:lineWidth+'px'}"></view>
			</view>
			<view style="flex-direction: row;flex: 1;">
				<text class="text">{{currentTime?currentTime:'00:00'}}</text>
				<text class="text" style="margin: 0 10rpx;">/</text>
				<text class="text" style="opacity: .5;">{{duration?duration:'00:00'}}</text>
			</view>
			<image class="shengyin" :src="muted?ossUrl +  '/static/image/video/jingyin.png':ossUrl +  '/static/image/video/yinliang.png'"
				@click.stop="muted=!muted"></image>
			<image class="shengyin" style="margin-left:20rpx" :src="ossUrl +  '/static/image/video/quanping.png'" @click.stop="fullScreen">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "o-video",
		props: {
			// 短剧信息
			info: {
				type: Object,
				default: () => {}
			},
			// 视频信息
			item: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				width: 0,
				height: 0,
				key: new Date().getTime(),
				videoContext: null,
				showPlayBtn: true,
				loading: false,
				lineWidth: 0,
				currentTime: 0,
				duration: 0,
				muted: false,
				playing: true,
				isZan: false,
				isSc: false,
				controls: false,
				isFullscreen: false,
				touching: false, // 是否正在触摸进度条
				touchStartX: 0, // 触摸开始的X坐标
				touchStartWidth: 0 // 触摸开始时进度条的宽度
			};
		},
		created() {
			const systemInfo = uni.getSystemInfoSync()
			this.width = systemInfo.windowWidth
			this.height = systemInfo.windowHeight
			console.log('systemInfo', systemInfo)
		},
		watch: {
			playing: {
				handler(val) {
					// 保持屏幕常亮
					uni.setKeepScreenOn({
						keepScreenOn: val
					});
				}
			}
		},
		mounted() {
			this.videoContext = uni.createVideoContext(`myVideo`, this)
			console.log('this.videoContext', this.videoContext)
		},
		computed: {
			durationInSeconds() {
				if (!this.duration) return 0
				const [minutes, seconds] = this.duration.split(':').map(Number)
				return minutes * 60 + seconds
			}
		},
		methods: {
			onProgressTouchStart(e) {
				this.touching = true
				this.touchStartX = e.touches[0].pageX
				this.touchStartWidth = this.lineWidth
			},
			onProgressTouchMove(e) {
				if (!this.touching) return
				const deltaX = e.touches[0].pageX - this.touchStartX
				const newLineWidth = this.touchStartWidth + deltaX
				if (newLineWidth >= 0 && newLineWidth <= this.width) {
					this.lineWidth = newLineWidth
					const newTime = (newLineWidth / this.width) * this.durationInSeconds
					this.videoContext.seek(newTime)
				}
			},
			onProgressTouchEnd() {
				this.touching = false
			},
			change() {
				if (!this.isFullscreen) {
					this.playing ? this.pause() : this.play()
				}
			},
			play() {
				console.log('this.videoContext', this.videoContext)
				console.log(this.videoContext.play)
				this.videoContext.play()
			},
			pause() {
				this.videoContext.pause()
			},
			fullScreen() {
				this.videoContext.requestFullScreen()
			},
			onFullscreenchange(e) {
				this.isFullscreen = e.detail.fullScreen
				this.controls = e.detail.fullScreen
			},
			onEnded() {
				console.log("onEnded");
				this.currentTime = 0
				this.videoContext.exitFullScreen()
				this.$emit('ended')
				setTimeout(() => {
					this.key = new Date().getTime()
				}, 150)
			},
			onError() {
				console.log("onError");
				if (this.current == this.index) {
					uni.showToast({duration:3000,
						title: '播放失败',
						duration: 1000,
						icon: 'none'
					})
					setTimeout(() => {
						this.key = new Date().getTime()
						this.onEnded()
					}, 1000)
				}
			},
			onPlay() {
				if (this.current != this.index) {
					this.videoContext.pause()
					this.playing = false
				} else {
					this.playing = true
					this.showPlayBtn = false
					this.loading = false
				}
			},
			onPause() {
				this.showPlayBtn = true
				this.playing = false
			},
			onWaiting() {
				this.loading = true
			},
			onTimeupdate(e) {
				if (this.loading) this.loading = false
				if (!this.playing) this.playing = true
				if (!this.duration || this.duration == '00:00') this.duration = this.secondToTime(e.detail.duration, 1)
				this.currentTime = this.secondToTime(e.detail.currentTime)
				this.lineWidth = e.detail.currentTime / e.detail.duration * this.width
			},
			secondToTime(s, n) {
				const t = parseInt(s)
				const hours = Math.floor(t / (60 * 60));
				const seconds = t % (60 * 60)
				const minutes = Math.floor(seconds / 60);
				const seconds2 = seconds % 60
				if (hours > 0) {
					return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds2.toString().padStart(2, '0')}`;
				} else {
					return `${minutes.toString().padStart(2, '0')}:${seconds2.toString().padStart(2, '0')}`;
				}
			}
		},
	}
</script>

<style lang="scss">
	.box {
		background: #000000;
		width: 100vw;
		height: 100vh;
	}

	.video {
		width: 750rpx;
		background-color: #000000;
		height: calc(100vh - 88rpx);
	}

	.text {
		color: #fff;
		font-size: 28rpx;
	}

	.info {
		width: 100%;
		box-sizing: border-box;
		position: absolute;
		z-index: 100;
		left: 0;
		bottom: 130rpx;
		padding: 30rpx 140rpx 0rpx 30rpx;

		.title {
			font-size: 36rpx;
			max-width: calc(750rpx - 140rpx - 60rpx);
		}

		.des {
			background-color: rgba(255, 255, 255, .1);
			border-radius: 10rpx;
			padding: 15rpx 20rpx;

			.text {
				font-size: 24rpx;
			}
		}
	}

	.btns {
		position: fixed;
		z-index: 100;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 140rpx;
		height: fit-content;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;


		.toux {
			height: 88rpx;
			width: 88rpx;
			border-radius: 50%;
			object-fit: cover;
			//background-image: url('/static/video/empty.png');
		}

		.btn {
			height: 66rpx;
			width: 66rpx;
		}

		.text {
			margin-top: 10rpx;
			margin-bottom: 30rpx;
			font-size: 26rpx;
		}
	}

	.play-btn {
		height: 68rpx;
		width: 68rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loading {
		height: 60rpx;
		width: 60rpx;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}



	.duration {
		position: fixed;
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left: 0;
		width: 750rpx;
		bottom: 0;
		box-sizing: border-box;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: rgba(255, 255, 255, 0.05);

		.progress {
			width: 750rpx;
			height: 2rpx;
			position: absolute;
			left: 0;
			top: -2px;
			z-index: 2;

			.line {
				height: 4rpx;
				width: 100%;
				background-color: rgba(255, 255, 255, .35);

			}

		}
	}

	.shengyin {
		height: 38rpx;
		width: 38rpx;
	}
</style>